<template>
  <div class="container">
    <el-form ref="form" class="form" :model="formData" label-width="100" :rules="rules">
      <el-form-item label="折旧方法" prop="way">
        <el-select v-model="formData.way" placeholder="请选择折旧方法" style="flex-grow: 1;"
          :clearable="true">
          <el-option label="平均年限法" :value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="预计残值率" prop="residual">
        <el-input v-model="formData.residual" placeholder="请输入预计残值率" style="flex-grow: 1;" type="number" min="0">
          <template #append>%</template>
        </el-input>
      </el-form-item>
      <el-form-item label="首次折旧时间" prop="startType">
        <el-select v-model="formData.startType" placeholder="请选择首次折旧时间" style="flex-grow: 1;"
          :clearable="true">
          <el-option label="入库时间的当月" :value="1"></el-option>
          <el-option label="入库时间的次月" :value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="备注">
        <el-input type="textarea" v-model="formData.remark" placeholder="请输入备注" maxlength="50" show-word-limit/>
      </el-form-item>
      <div class="action">
        <el-button type="primary" size="small" @click="handleSubmit">保存</el-button>
      </div>
    </el-form>
  </div>
</template>

<script setup>

import api from './api.js'

const { proxy } = getCurrentInstance();

const form = ref();

const formData = reactive({
  way: null,
  residual: null,
  startType: null,
  remark: null
})

const rules = {
  way: [{
    required: true, trigger: 'blur', message: '不能为空'
  }],
  startType: [{
    required: true, trigger: 'blur', message: '不能为空'
  }],
  residual: [{
    required: true, trigger: 'blur', message: '不能为空'
  }, {
    type: 'number', trigger: 'blur', message: '必须为数字', transform: (value) => Number(value)
  }],
}

async function handleSubmit() {
  const valid = await form.value.validate();

  if (valid) {
    api.save(formData).then(response => {
      proxy.$message.success('保存成功');
    })
  }
}

async function getInfo() {
  const info = await api.getInfo();
  Object.assign(formData, info);
}

onMounted(()=> {
  debugger
  getInfo();
})

</script>


<style scoped>
.container {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  color: #333;
  align-items: center;
  height: 100vh;
  padding: 10px;
}

.form {
  padding: 15px;
  border-radius: 6px;
  width: 500px;


}

.action {
  text-align: center;
  margin-top: 10px;
}
</style>
